<template>
  <div class="wrapcSet">
    <div class="containerWrap" ref="mapScreenfull">
      <div class="infoButton">
        <!--<i @click='getRailMapSet()' class="iconfont icon-shuaxin leftIcon"></i>-->
        <i  style="font-size: 22px;" @click='screenfullMap' class="iconfont icon-quanping2"></i>
      </div>
      <div :id="mapBaidu" style=" height:100%;width: 100%;">
      </div>
    </div>
  </div>
</template>

<script>

  export default {
    props: ["centerLatLng"],
    data () {
      return {
        map: "",
        drawingManager: "",
        dioTrue: "",
        mapBaidu:"mapBaidu"+Date.parse(new Date())/1000,
        editInfoId2: -10,
        resultShape: [],
        overlays: [],
        polygon: [],
        markers: [],
      }
    },
    mounted(){
      this.getRailMapSet()
    },
    created(){

    },
    methods: {

      screenfullMap(){
        if (this.screenfull.enabled) {
          this.screenfull.toggle(this.$refs.mapScreenfull);
        }
      },
      getRailMapSet(){

        let _this = this
        _this.map = new BMap.Map(_this.mapBaidu, {
          enableMapClick: false,
          minZoom: 10,
          maxZoom: 19
        });          // 创建地图实例
        let pointOne
        if(_this.centerLatLng[0]&&_this.centerLatLng[1]){
          pointOne = new BMap.Point(_this.centerLatLng[0],_this.centerLatLng[1])
          _this.map.centerAndZoom(pointOne, 18);             // 初始化地图，设置中心点坐标和地图级别
          _this.map.addOverlay(new BMap.Marker(pointOne))
        }else {
          pointOne="深圳"
          _this.map.centerAndZoom(pointOne, 15);             // 初始化地图，设置中心点坐标和地图级别
        }

        _this.map.enableScrollWheelZoom(); // 允许滚轮缩放

        _this.map.addControl(new BMap.OverviewMapControl());
        _this.map.addControl(new BMap.NavigationControl());  //添加默认缩放平移控件


      },
      draw(type){
        this.drawingManager.open();
        this.drawingManager.setDrawingMode(type);

      },

    },
    watch: {
      centerLatLng(){
        this.getRailMapSet()
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../../common/stylus/mixin.styl"

 /* #mapBaidu img{
    max-width: none;
  }*/


  .containerWrap {
    height: 100%;
    width: 100%;
    margin 10px auto;
    position: relative;
  }

  .contentView .el-dialog {
    top: 5%;
  }

  .wrapcSet {
    height 300px
    width: 98%;
    margin 0 auto;
  }

  .wrapcSet:hover .infoButton {
    opacity: 1;
  }

  .infoButton {
    width 30px
    height 20px
    font-size: 22px;
    color: #3975FE;
    position: absolute;
    top: 10px;
    right: 0px;
    z-index 5
    opacity: 0;

  }

  .map {
    font-size: 25px;
    margin 0 auto;
    display: inline-block;
    width 100%;
    height: 100%;
    text-align: center;
    font-weight: bold;
  }

  .infoButton .iconfont {
    display: inline-block;
    font-size: 20px;
    cursor pointer
  }

  .leftIcon {
    margin-right: 10px !important;
  }

</style>
